<template>
  <div class='container'>
    <el-card class="box-card">
      黄莹莹
      <!-- 搜索 -->
      <SubjectsSearch @subjectSearch="onSubjectSearch" @addClick="addSubjectDialog=true" />
      <!-- 提示信息 -->
      <el-row>
        <el-alert
          :title="'数据一共'+total+'条'"
          type="info"
          show-icon>
        </el-alert>
      </el-row>
      <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :cell-style="{height:'67px'}"
          >
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="学科名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            width="205">
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="160">
            <template v-slot="{row}">
              {{row.addDate | parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            width="205"
            :formatter="onformdata">
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
            width="205">
          </el-table-column>
          <el-table-column
            prop="tags"
            label="标签"
            width="205">
          </el-table-column>
          <el-table-column
            prop="totals"
            label="题目数量"
            width="205">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="text" @click="clickDirectorys(row)">学科分类</el-button>
              <el-button type="text" @click="clickTags(row)">学科标签</el-button>
              <el-button type="text" @click="onAddClick(row)">修改</el-button>
              <el-button type="text" @click="onDelClick(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageData.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total='total'>
        </el-pagination>
    </el-card>
    <!-- 新增学科对话框 -->
    <SubjectsAdd v-if="addSubjectDialog" :addSubjectDialog.sync="addSubjectDialog" @getSubjects="loadSubjectsDetail(pageData)" :subjectRow.sync="subjectRow"/>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects.js'
import SubjectsSearch from '../components/subjects-search.vue'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      currentPage: 1,
      total: 10,
      pageData: {
        page: 1,
        pagesize: 10
      },
      addSubjectDialog: false,
      subjectRow: {}

    }
  },
  components: {
    SubjectsSearch,
    SubjectsAdd
  },
  created () {
    this.loadSubjectsDetail(this.pageData)
  },
  methods: {
    // 加载学科表格详情
    async loadSubjectsDetail (pageData) {
      try {
        const res = await list(pageData)
        this.total = res.data.counts
        this.tableData = res.data.items
      } catch (err) {
        this.$message.error('请求失败')
      }
    },
    // 点击每页条数
    handleSizeChange (val) {
      this.pageData.pagesize = val
      this.pageData.page = 1
      this.loadSubjectsDetail(this.pageData)
    },
    // 点击页码数
    handleCurrentChange (val) {
      this.pageData.page = val
      this.loadSubjectsDetail(this.pageData)
    },
    // 是否显示格式化
    onformdata (row, column, cellValue, index) {
      return row.isFrontDisplay === 1 ? '是' : '否'
    },
    // 点击搜索
    onSubjectSearch (val) {
      this.pageData.subjectName = val
      this.pageData.page = 1
      this.loadSubjectsDetail(this.pageData)
    },
    // 点击新增学科
    onAddClick (row) {
      console.log(row)
      this.subjectRow = row
      this.addSubjectDialog = true
    },
    // 点击删除
    onDelClick (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        if (res.status !== 200) {
          this.$message.error('亲，请稍后重试')
        }
        this.loadSubjectsDetail(this.pageData)
        this.$message.success('亲，删除成功哟!')
      }).catch(() => {
      })
    },
    // 跳转目录
    clickDirectorys (row) {
      this.$router.push({ path: 'directorys', query: { id: row.id, name: row.subjectName } })
    },
    // 跳转标签
    clickTags (row) {
      console.log(row)
      this.$router.push({ path: 'tags', query: { id: row.id, name: row.subjectName } })
    }
  }

}
</script>

<style scoped lang='less'>
.el-card__body{
  padding: 20px;
  }
  .el-pagination {
    text-align: right;
    /deep/.el-pagination__jump {
      margin-left: 0px;
    }
  }
  /deep/.el-form {
    height: 51px !important;
  }
</style>
